<template>
	<view>
		<u-navbar
			title="认养详情"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="7" v-for="i in 8" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else>
				<view style="padding: 16rpx;">
					<view class="foster-order-box">
						<view class="foster-order-no">
							<text class="foster-order-no-title">订单编号:</text>
							<text class="foster-order-no-num">{{order.orderNo}}</text>
						</view>
						<view class="foster-order-image">
							<u--image mode="aspectFill" radius="8rpx" :src="order.adoptProject.image[0].url" width="140rpx" height="140rpx"></u--image>
							<view style="width: 16rpx;"/>
							<view class="card1-img-r">
								<view class="card1-img-r-t u-line-1">{{order.detail[0].name.split('#')[0]}}</view>
								<view class="card1-img-r-t1 u-line-1">{{order.detail[0].adoptSku}}</view>
								<view style="color: #666;font-size: 24rpx;padding-top: 8rpx;">x{{order.buyCount}}{{order.unit}}</view>
							</view>
						</view>
					</view>
					<u-tabs :current="current" @change="tabChange" :list="list1" :lineColor="appColor" :lineWidth="42" :activeStyle="{color: appColor}" :inactiveStyle="{color: '#333'}"></u-tabs>
					<view style="height: 32rpx;"/>
					<template v-if="current === 0">
						<view class="foster-order-box">
							<view class="foster-order-box-title">认养详情</view>
							<!-- <view class="foster-order-box-item">
								<text class="foster-order-box-item-l">项目名称: </text>
								<view class="foster-order-box-item-r">{{order.adoptProject.name}}</view>
							</view> -->
							<view class="foster-order-box-item">
								<text class="foster-order-box-item-l">认养信息: </text>
								<view class="foster-order-box-item-r">{{order.adoptProject.varieties}}x{{order.buyCount}}{{order.unit}}</view>
							</view>
							<view class="foster-order-box-item u-border-bottom">
								<text class="foster-order-box-item-l">认养状态: </text>
								<view class="foster-order-box-item-r">{{order.orderStatus_dictText}}</view>
							</view>
							
							<!-- <view class="foster-order-box-item">
								<text class="foster-order-box-item-l">起止时间: </text>
								<view class="foster-order-box-item-r">{{order.adoptProject.startTime.replaceAll('-', '.')}}~{{order.adoptProject.endTime.replaceAll('-', '.')}}</view>
							</view>
							<view class="foster-order-box-item">
								<text class="foster-order-box-item-l">认养天数: </text>
								<view class="foster-order-box-item-r">{{order.adoptProject.cycle}}天</view>
							</view> -->
							<view class="foster-order-box-item">
								<text class="foster-order-box-item-l">下单时间: </text>
								<view class="foster-order-box-item-r">{{order.createTime}}</view>
							</view>
							<view class="foster-order-box-item">
								<text class="foster-order-box-item-l">认养金额: </text>
								<view class="foster-order-box-item-r" style="color: #f40215;">{{order.totalPrice}}元</view>
							</view>
							<!-- <view class="foster-order-box-item">
								<text class="foster-order-box-item-l">预付金额: </text>
								<view class="foster-order-box-item-r" style="color: #f40215;">-{{order.depositPrice}}元</view>
							</view> -->
							<view class="foster-order-box-item">
								<text class="foster-order-box-item-l">会员优惠: </text>
								<view class="foster-order-box-item-r" style="color: #f40215;">-{{order.discount}}元</view>
							</view>
							<view class="foster-order-box-item">
								<text class="foster-order-box-item-l">优惠券: </text>
								<view class="foster-order-box-item-r" style="color: #f40215;">-{{order.couponPrice}}元</view>
							</view>
							<!-- <view class="foster-order-box-item">
								<text class="foster-order-box-item-l">尾款金额: </text>
								<view class="foster-order-box-item-r" style="color: #f40215;">{{order.balancePrice}}元</view>
							</view> -->
							<!-- <view class="foster-order-box-item">
								<text class="foster-order-box-item-l">项目合同: </text>
								<view class="foster-order-box-item-r">预览合同</view>
							</view> -->
						</view>
						<!-- <view class="foster-order-box">
							<view class="foster-order-box-title">认养收获</view>
							<view :class="['foster-order-box-item', index === order.detail.length-1 ? null : 'u-border-bottom']" :key="index" v-for="(item, index) in order.detail">
								<text :style="{backgroundColor: appColor}" class="foster-order-box-item-cirlce">{{index + 1}}</text>
								<view style="width: 16rpx;"/>
								<view class="foster-order-box-item-r">{{item.adoptSku}}</view>
							</view>
						</view> -->
					</template>
					<!-- <template v-else-if="current === 1">
						<view class="foster-order-box">
							<live-player
								v-if="order.detail[0].liveUrl"
							  :src="order.detail[0].liveUrl"
							  autoplay
							  style="width: 100%; height: 430rpx;"
							  object-fit="fillCrop"
							  @statechange="statechange"
							  @error="error"
							  background-mute
							>
								<cover-view v-if="liveState !== 'success' " class="live-loading">{{liveStateText[liveState]}}</cover-view>
							</live-player>
							<u-empty
								v-else
								text="未设置监控"
							    mode="data"
							    icon="http://cdn.uviewui.com/uview/empty/data.png"
							>
							</u-empty>
						</view>
					</template> -->
					<template v-else-if="current === 1">
						<view class="foster-order-box">
							<u-empty
								v-if="order.workTaskList.length==0"
							    mode="data"
							    icon="http://cdn.uviewui.com/uview/empty/data.png"
							>
							</u-empty>
							<u-steps dot :activeColor="appColor" inactiveColor="#969799" current="0" direction="column">
								<u-steps-item :title="item.workOrder_dictText" :desc="item.completeTime" v-for="(item, index1) in order.workTaskList" :key="index1">
								</u-steps-item>
							</u-steps>
							<u-empty
								v-if="!order.workTaskList"
							    mode="data"
							    icon="http://cdn.uviewui.com/uview/empty/data.png"
							>
							</u-empty>
						</view>
					</template>
					<template v-else-if="current === 2">
						<u-scroll-list :indicatorWidth="order.detail.length === 1 ? 0 : 50" :enable-flex="true" :indicatorActiveColor="appColor">
							<view class="scroll-list" style="flex-direction: row;">
								<view style="width: calc(100vw - 32rpx);" v-for="(detail, index) in order.detail" :key="index">
									<!-- <view class="foster-order-box" style="margin-bottom: 0;">
										<view class="foster-order-box-title">配送信息</view>
										<view class="foster-order-box-item">
											<text class="foster-order-box-item-l">认养编号: </text>
											<view class="foster-order-box-item-r">{{detail.adoptNumber}}</view>
										</view>
										<view class="foster-order-box-item">
											<text class="foster-order-box-item-l">配送周期: </text>
											<view class="foster-order-box-item-r">{{order.deliveryMethod_dictText}}</view>
										</view>
									</view> -->
									<view style="margin-bottom: 0;" :class="['foster-order-box', detail.delivery.length-1 === index ? null : 'u-border-bottom']" v-for="(item, index) in detail.delivery" :key="index">
										<view class="foster-order-box-title">配送信息</view>
										<view>
											<view class="foster-order-box-item">
												<text class="foster-order-box-item-l">配送时间: </text>
												<view class="foster-order-box-item-r">{{item.deliveryTime ? item.deliveryTime.slice(0, 10) : '暂无'}}</view>
											</view>
											<view class="foster-order-box-item">
												<text class="foster-order-box-item-l">配送状态: </text>
												<view class="foster-order-box-item-r" :style="{color: appColor}">{{item.status_dictText}}</view>
											</view>
											<view class="foster-order-box-item" style="align-items: normal;">
												<text class="foster-order-box-item-l">收货地址: </text>
												<view class="foster-order-box-item-r">
													<view>{{item.address}}</view>
													<view style="padding-top: 8rpx;">{{item.memberName}} {{item.phone}}</view>
												</view>
											</view>
											<view class="foster-order-box-item">
												<text class="foster-order-box-item-l">备注: </text>
												<view class="foster-order-box-item-r">{{item.remark ? item.remark : '无'}}</view>
											</view>
											<view class="foster-order-box-item" style="justify-content: space-between;" v-if="item.status!=='0'">
												<text class="foster-order-box-item-l"></text>
												<view class="foster-order-box-item-r" style="width: 160rpx;">
													<view :style="{backgroundColor: appColor}" class="btn" @click="logistics(item)">查看物流</view>
												</view>
											</view>
										</view>
									</view>
									<!-- <view style="padding: 0 32rpx; margin-bottom: 32rpx;display: flex;align-items: center;justify-content: flex-end;">
										<view class="good-detail-bootom-r">
											<u-button size="small" :color="appColor" text="立即配送" shape="circle"></u-button>
										</view>
										<view class="good-detail-bootom-r" style="margin-left: 16rpx;">
											<u-button size="small" :color="appColor" text="平台代售" shape="circle"></u-button>
										</view>
									</view>	 -->
								</view>
							</view>
						</u-scroll-list>
					</template>
					<template v-else-if="current === 3">
						<view class="foster-order-box">
							<view :class="['foster-top-cell', index === order.rankList.length-1 ? null : 'u-border-bottom']" v-for="(rank, index) in order.rankList" :key="rank.id">
								<u--image v-if="[0, 1, 2].includes(index)" mode="aspectFill" shape="circle" :src="topTul[index]" width="48rpx" height="48rpx"></u--image>
								<view v-else style="width: 48rpx;text-align: center;">{{index+1}}</view>
								<view class="foster-top-cell-1">
									<u--image mode="aspectFill" shape="circle" :src="rank.avatar" width="64rpx" height="64rpx"></u--image>
									<text style="padding-left: 32rpx;">{{rank.nickName}}</text>
								</view>
								<view class="foster-top-cell-2">{{rank.buyCount + order.adoptProject.unit}}</view>
							</view>
							<u-empty
								v-if="order.rankList.length==0"
							    mode="data"
							    icon="http://cdn.uviewui.com/uview/empty/data.png"
							>
							</u-empty>
						</view>
					</template>
				</view>
			</template>
		</scroll-view>
		<view class="good-detail-bootom" v-if="current === 0 && !loading && (order.payStatus === '2.1' || order.payStatus === '2.2') ">
			<view style="margin: 0 32rpx;height: 100%;width: calc(100vw - 64rpx);display: flex;align-items: center;justify-content: space-between;">
				<template v-if="order.payStatus === '2.1'">
					<view @click="toBalanceFoster" class="good-detail-bootom-l" :style="{backgroundColor: appColor}">
						<text>付尾款</text>
					</view>
					<view @click="toRefundFoster(1)" class="good-detail-bootom-r" :style="{backgroundColor: '#f40215'}">
						<text>退定金</text>
					</view>
				</template>
				<template v-else-if="order.payStatus === '2.2'">
					<view @click="toRefundFoster(2)" class="good-detail-bootom-m" :style="{backgroundColor: appColor}">
						<text>申请退款</text>
					</view>
				</template>
			</view>	
		</view>
	</view>
</template>

<script>
	import { getOrderDetail } from "@/api/me.js"
	export default {
		computed: {
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - (this.current === 0 ? 50 : 0) + 'px';
			}
		},
		data() {
			return {
				topTul: {
					0: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/%E9%87%91%E7%89%8C.png',
					1: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/%E9%93%B6%E7%89%8C.png',
					2: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/%E9%93%9C%E7%89%8C.png',
				},
				liveStateText: {
					'loading': '加载中...',
					'success': '',
					'fail': '设备离线...',
				},
				liveState: 'loading',
				loading: true,
				list1: [
					{name: '基本信息'},
					// {name: '视频监控'},
					{name: '认养日志'},
					{name: '配送信息'},
					{name: '认养榜单'},
				],
				current: 0,
				order: {},
				id: -1
			}
		},
		onLoad({id, index}) {
			this.id = id;
			this.current =  Number(index);
		},
		onShow() {
			this.loading = true;
			setTimeout(() => {
				getOrderDetail({orderId: this.id}).then(res => {
					this.order = res.result;
				}).finally(() => {
					this.loading = false
				})
			}, 200)
		},
		methods: {
			//物流
			logistics({id}) {
				let url = `/pages/me/logisticsFoster?id=${id}`;
				this.$cuNavigateTo(url);
			},
			// 申请退款
			toRefundFoster(type) {
				// 定金1 尾款2
				let url = `/pages/me/refundFoster?id=${this.order.id}&refundType=${type}`;
				this.$cuNavigateTo(url);
			},
			// 尾款支付
			toBalanceFoster() {
				let url = `/pages/me/balanceFoster?id=${this.order.id}`;
				this.$cuNavigateTo(url);
			},
			tabChange({index}) {
				this.current = index
			},
			statechange(e){
				if(e.detail.code == 2003 || e.detail.code == 2032) {
					this.liveState = 'success';
				} else {
					this.liveState = 'loading';
				}
				console.log('live-player code:', e.detail.code)
			},
			error(e){
				this.liveState = 'fail';
				console.error('live-player error:', e.detail.errMsg)
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	.u-scroll-list {
		background-color: #fff;
	}
	.live-loading {
		width: 100%;
		height: 430rpx;
		text-align: center;
		line-height: 430rpx;
		color: #fff;
	}
</style>
<style lang="scss" scoped>
	.foster-order-box-item-cirlce {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		font-size: 24rpx;
		border-radius: 50%;
		color: #fff;
	}
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);     /*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);  /*兼容 iOS>11.2*/
		box-sizing: content-box;
		.good-detail-bootom-l1 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			.good-detail-bootom-l1-t {
				font-size: 28rpx;
				padding-bottom: 4rpx;
			}
			.good-detail-bootom-l1-b {
				.good-detail-bootom-l1-b-1 {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}
		.good-detail-bootom-l {
			flex: 1;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			border-radius: 20px 0 0 20px;
		}
		.good-detail-bootom-r {
			flex: 1;
			line-height: 40px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			border-radius: 0 20px 20px 0;
		}
		.good-detail-bootom-m {
			flex: 1;
			line-height: 40px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			border-radius: 20px;
		}
		
	}
	.scroll-list {
		@include flex(column);
	}
	.foster-order-no {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 16rpx 0;
		.foster-order-no-title {
			color: #666;
		}
		.foster-order-no-num {
			color: #333;
			padding-left: 16rpx;
		}
	}
	.foster-order-image {
		padding-top: 16rpx;
		display: flex;
		align-items: center;
		height: 140rpx;
		padding-bottom: 4rpx;
		.card1-img-r {
			flex: 1;
			height: 100%;
			.card1-img-r-t {
				padding-top: 4rpx;
				color: #000;
				font-size: 28rpx;
			}
			.card1-img-r-t1 {
				color: #666;
				font-size: 24rpx;
			}
			.card1-img-r-b {
				padding-top: 4rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.card1-img-r-b-price {
					font-size: 24rpx;
					color: #f40215;
				}
			}
		}
	}
	
	.foster-order-box {
		border-radius: 16rpx;
		padding: 16rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		.foster-top-cell {
			display: flex;
			align-items: center;
			padding: 16rpx;
			.foster-top-cell-1 {
				flex: 1;
				font-size: 28rpx;
				color: #000;
				padding-left: 32rpx;
				display: flex;
				align-items: center;
			}
			.foster-top-cell-2 {
				color: #666;
				font-size: 28rpx;
			}
		}
		.foster-order-box-title {
			font-size: 30rpx;
			color: #333;
			line-height: 30rpx;
			font-weight: bold;
			padding: 32rpx 0 16rpx 0;
		}
		.foster-order-box-item {
			font-size: 26rpx;
			line-height: 26rpx;
			padding: 16rpx 0;
			display: flex;
			align-items: center;
			color: #333;
			.foster-order-box-item-l {
				color: #333;
				padding-right: 16rpx;
			}
			.foster-order-box-item-r {
				color: #333;
				font-weight: 600;
				.btn {
					height: 48rpx;
					border-radius: 24rpx;
					width: 100%;
					line-height: 48rpx;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
	}
	.foster-order-box1 {
		padding-left: 16rpx;
	}
</style>